<template>
  <div class="article_detail_box">
    <template v-for="(item, index) in props.list" :key="`k${index}`">
      <div v-if="index < 3 && !isArrowDown" class="article_detail_item">
        <el-image class="article_cover" :preview-src-list="[item.cover]" :preview-teleported="true" fit="cover" :src="item.cover">
          <template #error>
            <el-icon>
              <icon-picture />
            </el-icon>
          </template>
        </el-image>
        <el-link v-if="props.isLink" class="article_title_link" :href="item.article_url" target="_blank">
          {{ item.title }}
        </el-link>
        <div v-else class="article_title"> {{ item.title }}</div>
      </div>
    </template>
    <template v-if="isArrowDown">
      <div v-for="(item, index) in props.list" :key="`k${index}`" class="article_detail_item">
        <el-image class="article_cover" :preview-src-list="[item.cover]" :preview-teleported="true" fit="cover" :src="item.cover">
          <template #error>
            <el-icon>
              <icon-picture />
            </el-icon>
          </template>
        </el-image>
        <el-link v-if="props.isLink" class="article_title_link" :href="item.article_url" target="_blank">
          {{ item.title }}
        </el-link>
        <div v-else class="article_title"> {{ item.title }}</div>
      </div>
    </template>
    <div v-if="props.list.length > 3 && !isArrowDown" class="arrow_down" @click="onShow">
      <el-icon>
        <ArrowDown />
      </el-icon> 展开
    </div>
  </div>
</template>

<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { ref, defineProps } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  index: {
    type: Number,
    default: 0
  },
  isLink: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['submit'])
const isArrowDown = ref(false)
const onShow = () => {
  isArrowDown.value = true
  if (!props.isLink) {
    emit('submit', props.index)
  }
}
</script>

<style scoped lang="scss">
.article_detail_item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  .article_cover {
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
    margin-right: 10px;
    font-size: 30px;
  }

  .article_title_link {
    font-size: 14px;
    font-weight: 300;
    color: #33302d;

    &:hover {
      color: #ff6b00;
    }
  }

  .article_title {
    font-size: 14px;
    font-weight: 300;
    color: #33302d;
  }
}

.arrow_down {
  cursor: pointer;
  color: #ff6b00;
  font-size: 10px;
}
</style>
